{% extends 'base.html' %}

{% block title %}编辑角色 - {{ role.name }} - Django RBAC 项目{% endblock %}

{% block content %}
<div class="min-h-screen bg-gray-50 py-12 sm:px-6 lg:px-8">
    <div class="max-w-3xl mx-auto">
        <div class="bg-white shadow overflow-hidden sm:rounded-lg">
            <div class="px-4 py-5 sm:px-6">
                <h3 class="text-lg leading-6 font-medium text-gray-900">
                    编辑角色: {{ role.name }}
                </h3>
                <p class="mt-1 max-w-2xl text-sm text-gray-500">
                    修改角色信息和权限设置
                </p>
            </div>
            <div class="border-t border-gray-200">
                <form method="post" class="divide-y divide-gray-200">
                    {% csrf_token %}

                    <!-- 基本信息 -->
                    <div class="px-4 py-5 sm:px-6">
                        <div class="grid grid-cols-1 gap-6">
                            <div>
                                <label for="name" class="block text-sm font-medium text-gray-700">
                                    角色名称
                                </label>
                                <div class="mt-1">
                                    <input type="text" name="name" id="name"
                                           value="{{ role.name }}"
                                           class="shadow-sm focus:ring-blue-500 focus:border-blue-500 block w-full sm:text-sm border-gray-300 rounded-md"
                                           required>
                                </div>
                                {% if form.name.errors %}
                                    {% for error in form.name.errors %}
                                        <p class="mt-2 text-sm text-red-600">{{ error }}</p>
                                    {% endfor %}
                                {% endif %}
                            </div>

                            <div>
                                <label for="description" class="block text-sm font-medium text-gray-700">
                                    描述
                                </label>
                                <div class="mt-1">
                                    <textarea id="description" name="description" rows="3"
                                              class="shadow-sm focus:ring-blue-500 focus:border-blue-500 block w-full sm:text-sm border-gray-300 rounded-md">{{ role.description }}</textarea>
                                </div>
                                {% if form.description.errors %}
                                    {% for error in form.description.errors %}
                                        <p class="mt-2 text-sm text-red-600">{{ error }}</p>
                                    {% endfor %}
                                {% endif %}
                            </div>
                        </div>
                    </div>


                    <!-- 表单按钮 -->
                    <div class="px-4 py-5 sm:px-6">
                        <div class="flex justify-between">
                            <a href="{% url 'manage_roles' %}"
                               class="inline-flex items-center px-4 py-2 border border-gray-300 rounded-md shadow-sm text-sm font-medium text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">
                                返回角色列表
                            </a>
                            <div class="flex space-x-3">
                                <button type="submit"
                                        class="inline-flex justify-center py-2 px-4 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">
                                    保存更改
                                </button>
                            </div>
                        </div>
                    </div>
                </form>
            </div>
        </div>


    </div>
</div>
{% endblock %}

